<template>
  <div class="dictionary">
    <el-form
      inline
      :model="ruleForm"
      ref="ruleForm"
      label-width="80px"
      class="ruleForm"
    >
      <el-form-item label="字典标记">
        <el-select v-model="ruleForm.configflag" placeholder="请选择字典标记">
          <el-option
            v-for="item in labelList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          icon="el-icon-search"
          size="mini"
          @click="handleQuery"
          >搜索</el-button
        >
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
          >重置</el-button
        >
      </el-form-item>
    </el-form>
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="danger"
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          >新增</el-button
        >
      </el-col>
      <!-- <el-col :span="1.5">
        <el-button
          type="success"
          plain
          icon="el-icon-edit"
          size="mini"
          :disabled="single"
          @click="handleUpdate"
          >修改</el-button
        >
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="danger"
          plain
          icon="el-icon-delete"
          size="mini"
          :disabled="multiple"
          @click="handleDelete"
          >删除</el-button
        >
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="info"
          plain
          icon="el-icon-upload2"
          size="mini"
          @click="handleImport"
          >导入</el-button
        >
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"
          @click="handleExport"
          >导出</el-button
        >
      </el-col> -->
    </el-row>
    <el-table :data="list" style="width: 100%" v-loading="loading">
      <el-table-column prop="configname" label="字典名称" align="center">
      </el-table-column>
      <el-table-column prop="configflag" label="字典标记" align="center">
      </el-table-column>
      <el-table-column prop="configremark" label="描述" align="center">
      </el-table-column>
      <el-table-column label="状态" align="center">
        <template slot-scope="{ row }">
          <el-tag :type="row.configstatus ? 'success' : 'danger' ">{{ row.configstatus ? "" : "不" }}可用</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="日期" align="center">
        <template slot-scope="{ row }">
          <div class="">
            <el-button
              type="text"
              @click="handleItem(1, row)"
              >编辑</el-button
            >
            <el-button
              type="text"

              @click="handleItem(2, row)"
              >{{ row.configstatus == 0 ? "启" : "禁" }}用</el-button
            >
          </div>
        </template>
      </el-table-column>
    </el-table>
		<pagination
			v-show="ruleForm.total > 0"
			:total="ruleForm.total"
			:page.sync="ruleForm.pageNum"
			:limit.sync="ruleForm.pageSize"
			@pagination="getConfigList"
		/>
    <el-dialog
      :title="upload.title"
      :visible.sync="upload.open"
      width="400px"
      append-to-body
      @close="(upload.open = false), cancelForm('form')"
    >
      <el-form
        :model="form"
        :rules="rules"
        ref="form"
        label-width="80px"
        class="form"
      >
        <el-form-item label="字典名称" prop="configname">
          <el-input
            v-model="form.configname"
            placeholder="请输入字典名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="字典标记" prop="configflag">
          <el-input
            v-model="form.configflag"
            placeholder="请输入字典标记"
          ></el-input>
        </el-form-item>
        <el-form-item label="描述" prop="configremark">
          <el-input
            v-model="form.configremark"
            placeholder="请输入描述"
          ></el-input>
        </el-form-item>
        <el-form-item label="状态" prop="configstatus">
          <el-switch
            v-model="form.configstatus"
            :active-value="1"
            active-text="可用"
            :inactive-value="0"
            inactive-text="不可用"
          ></el-switch>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm('form')">确 定</el-button>
        <el-button @click="(upload.open = false), cancelForm('form')"
          >取 消</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>
<script>
import {
  getConfigList,
  deleteConfig,
  addConfig,
  editConfig,
  openConfig,
} from "@/api/setting";
export default {
  data() {
    return {
      // 遮罩层
      loading: true,
      ruleForm: {
        pageNum: 1,
        pageSize: 10,
        configflag: "",
        total: 0,
      },
      upload: {
        open: false,
        title: "新增字典",
      },
      list: [],
      rules: {
        configname: [
          { required: true, message: "请输入字典名称", trigger: "blur" },
        ],
        configflag: [
          { required: true, message: "请输入字典标记", trigger: "blur" },
        ],
        // configremark: [
        //   { required: true, message: "请输入字典描述", trigger: "blur" },
        // ],
      },
      form: {
        id: null,
        configflag: "",
        configname: "",
        configremark: "",
        configstatus: 1,
      },
    };
  },
  methods: {
    /** 搜索按钮操作 */
    handleQuery() {
      this.loading = true;
      this.ruleForm.pageNum = 1;
      this.getConfigList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.ruleForm.configflag = "";
      // this.$refs['ruleForm'].resetFields();
      this.handleQuery();
    },
    //切换分页
    handleCurrentChange(val) {
      this.loading = true;
      this.ruleForm.pageNum = val;
      this.getConfigList();
    },
    //切换总条数
    handleSizeChange(val) {
      this.loading = true;
      this.ruleForm.pageSize = val;
      this.getConfigList();
    },
    handleItem(type, item) {
      if (type == 1) {
        this.form.id = item.id;
        let { id, configflag, configname, configremark, configstatus } = item;
        this.form = {
          id,
          configflag,
          configname,
          configremark,
          configstatus,
        };
        this.upload.title = "编辑字典";
        this.upload.open = true;
      } else {
        let api = item.configstatus
          ? deleteConfig({ id: item.id })
          : openConfig({ id: item.id });
        api.then((res) => {
          this.loading = true;
          this.ruleForm.pageNum = 1;
          this.$modal.msgSuccess(res.msg);
          this.getConfigList();
        });
      }
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let api = this.form.id ? editConfig(this.form) : addConfig(this.form);
          api.then((res) => {
            this.loading = true;
            this.upload.open = false;
            this.ruleForm.pageNum = 1;
            this.$modal.msgSuccess(res.msg);
            this.getConfigList();
          });
        } else {
          return false;
        }
      });
    },
    //新增
    handleAdd() {
      this.upload.title = '新增字典';
      this.form.configstatus = 1;
      this.upload.open = true;
    },
    //获取列表
    getConfigList() {
      getConfigList(this.ruleForm).then((res) => {
        this.list = res.data.list;
        this.ruleForm.total = res.data.total;
        this.loading = false;
      });
    },
  },
  created() {
    this.getConfigList();
  },
};
</script>
<style lang="scss" scoped>
.dictionary {
  margin: 24px 16px 0;
  background: #ffffff;
  padding: 24px;
}
</style>
